import React, { Component } from 'react'
import { Form, Input, Button, message, Checkbox } from 'antd';
import { Link, withRouter } from 'react-router-dom';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
// import NodeRSA from 'node-rsa'; // 加密
import './index.scss';
import CanvasPage from './CanvasPage'//背景组件
import { loginReq } from '@/utils/request'

@withRouter
class Login extends Component {
  componentDidMount() {
    this.mounted = true
  }
  render() {
    const defaultUsername = this.props.location.state || ''
    return (
      <div className="login-register-page" style={{ backgroundColor: 'rgb(35, 39, 65)', width: '100%', height: '100%' }}>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{
            remember: true,
            email: defaultUsername
          }}
          onFinish={this.onFinish}
          onFinishFailed={this.onFinishFailed}
        >
          {/* email */}
          <Form.Item
            name="email"
            rules={[
              {
                required: true,
                message: '请输入邮箱!',
              },
            ]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Email" />
          </Form.Item>
          {/* password */}
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '请输入密码!',
              },
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>
          {/* other */}
          <Form.Item>
            {/* noStyle??? */}
            <Form.Item name="remember" valuePropName="checked">
              <Checkbox><span style={{ color: '#fff' }}>记住密码</span></Checkbox>
            </Form.Item>
            <Link className="login-form-forgot" to="/register">
              {/* 忘记密码? */}
            </Link>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              Login
            </Button>
            <span style={{ color: '#fff' }}>Or </span>
            <Link to="/register">没账号?先去注册!</Link>
          </Form.Item>
        </Form>
        {/* 背景 */}
        <CanvasPage />
      </div>
    )
  }
  onFinish = values => {
    loginReq(values).then(res => {
      if (this.mounted) {
        if (res.result) {
          message.success({ duration: 1, content: res.msg })
          sessionStorage.setItem('bloger', res.result)
          sessionStorage.setItem('email', res.email)
          this.props.history.push('/blog')
          // window.location.href = "/topaz-blog/blog"
        } else {//登陆失败
          message.error({ duration: 1, content: res.msg })
        }
      }
    })
    // .finally(() => {
    //   this.props.history.push('/blog')
    // })
  }

  onFinishFailed = errorInfo => {
    // console.log('Failed:', errorInfo);
    message.error({ duration: 1, content: errorInfo.errorFields[0].errors[0] })
  }
  componentWillUnmount() {
    this.mounted = false
  }
}

export default Login
